<template>
	<up-scroll-list
		title-t="app.sports"
		icon="football"
		:total="list.length"
		see-all
		@see-all="$router.push('/sports')">
		<sports-swiper-item v-for="item in list" :key="item.eventId" :data="item" class="mt-2" />
	</up-scroll-list>
</template>

<script lang="ts" setup>
import { watch, computed } from 'vue'
import { UpScrollList } from '@/components/up'
import SportsSwiperItem from '@/components/sports/sports-swiper/sports-swiper-item.vue'
import { useAppStore, useMatchStore } from '@/store'
import { getRecommendMatchs } from '@/api/betting'
import { useRequest } from '@/hooks'
import { Match } from '@/types'

const appStore = useAppStore()
const matchStore = useMatchStore()

const { run, list } = useRequest<Match>(getRecommendMatchs, {
	onSuccess: () => {
		matchStore.setList(list.value, 'swiper')
	}
})

const pramas = computed(() => ({
	locale: appStore.lang,
	oddsStyle: appStore.odds,
	location: appStore.region,
	type: 'index'
}))

watch(
	pramas,
	(val) => {
		run(val, {
			refresh: true
		})
	},
	{
		immediate: true
	}
)
</script>
